<template>
  <form @submit.prevent="addHero">
    <legend>添加英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input type="text" class="form-control" v-model="heroName" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="gender" />男
        <input type="radio" value="女" v-model="gender" />女
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      heroName: "",
      gender: ""
    };
  },
  methods: {
    addHero() {
      const data = {
        heroName: this.heroName,
        gender: this.gender
      };
      this.$http.post("heroes", data).then(() => {
        this.$router.push("/hero");
      });
    }
  }
};
</script>

<style>
</style>